*{
    box-sizing: border-box;
}

body{
    margin: 0;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}


.pagein-enter{
    transform: translate(100%,0);
}
.pagein-enter-active,.pagein-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
}
.pagein-enter-to{
    transform: translate(0,0);
}
.pagein-leave{
    transform: translate(0,0);
}
.pagein-leave-to{
    transform: translate(-100%,0);
}

/*---------------*/
.pageout-enter{
    transform: translate(-100%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
}
.pageout-enter-to{
    transform: translate(0,0);
}
.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(100%,0);
}